<template>
  <div class="showFixed">
    <div class="invoiceBtn fixedTop fixedTopBg">
      <div></div>
      <div>
        <el-button class="btnNo btns">取消</el-button>
        <el-button class="btnAc btns" @click="savePost">保存</el-button>
      </div>
    </div>
    <el-card class="margintop" :body-style="{ padding: '0px' }">
      <div class="cardHead">
        <h3>邮寄地址管理</h3>
      </div>
      <div class="invoceBox">
        <p class="tip">*注以下为发票打印信息，请与公司注册信息仔细核对并谨慎填写</p>
        <el-form label-position="right" label-width="80px" :model="postData" :rules="rules" ref="postRef" :disabled="disabledForm">
          <el-row :gutter="20">
            <el-col :span="11" :offset="0">
              <el-form-item label="收件人姓名" label-width="93px" prop="company_operation.name">
                <el-input v-model.trim="postData.company_operation.name" placeholder="请输入收件人姓名"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11" :offset="7"></el-col>
            <el-col :span="11" :offset="0">
              <el-form-item label="联系电话" label-width="93px" prop="company_operation.mobile">
                <el-input v-model.trim="postData.company_operation.mobile" placeholder="请输入联系电话"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11" :offset="7"></el-col>
            <el-col :span="11" >
              <el-form-item label="寄送地址"  label-width="93px" prop="company_operation.region_info">
                <el-cascader  :placeholder="defaultarea" :class="{haveData:initValue}" ref="regLabel" :options="areaData"  v-model.trim="postData.company_operation.region_info" :props="areaProps" @change="areaChange"></el-cascader>

              </el-form-item>
            </el-col>
            <el-col :span="23" :offset="0">
              <el-form-item  label-width="93px"  prop="company_operation.address">
                <el-input v-model.trim="postData.company_operation.address" type="textarea" placeholder="请输入详细地址" rows='5'></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          
        </el-form>
      </div>
    </el-card>
    
  </div>
</template>

<script>
import loginApi from '@/api/loginApi.js';
import merge from 'deepmerge'
export default {
  components: {},
  data () {
    return {
      areaData:[],
      areaProps:{    //注册地址
        lazy: true,
          lazyLoad (node, resolve) {
            const level = node.level;
            const resData = {}
            if(level === 0){
              resData.pid=0
              resData.level=1
            }
            if(level === 1){
              resData.pid=node.value
              resData.level=2
            }
            if(level === 2){
              resData.pid=node.value
              resData.level=3
            }
            loginApi.getArea(resData)
            .then(res => {
              const data=res.data
              data.forEach(item => {
                item.value=item.id
                item.label=item.name
                item.leaf = level >= 2
              });
              resolve(res.data)
            })
          }
      },
      initValue:false,
      disabledForm:false,
      defaultarea:'请选择省市区',    //省市区
      postData:{
        company_operation: {
          name: "", //收件人姓名
          mobile: "", //联系电话
          address: "", //寄送详细地址
          region_id: "", //三级地区id
          // region_info:''  //三级地区中文明细
          province:'',
          county:'',
          city:'',
        },
      },
      rules:{
        'company_operation.name': [
          { required: true, message: '请输入收件人姓名', trigger: 'blur' },
        ],
        'company_operation.mobile': [
          { required: true, message: '请输入收件人联系电话', trigger: 'blur' },
          { pattern: /^1[3|4|5|7|8][0-9]{9}$/, message: "请输入正确手机号", trigger: "blur" },
        ],
        'company_operation.region_info': [
          { required: true, message: '请选择寄送地址', trigger: 'blur' },
        ],
        'company_operation.address': [
          { required: true, message: '请输入详细地址', trigger: 'blur' },
        ],
      }
    };
  },
  created () {
    this.getPostInfo()
  },
  methods: {
    // 获取邮寄信息
    async getPostInfo(){
      let res = await this.$http.companyApi.companyPost();
      console.log(res);
      const data = merge(this.postData,res.data)
      this.postData=data
      console.log(this.postData);
      console.log(222);
      if(res.data.company_operation.province && res.data.company_operation.province !=''){
        this.defaultarea=res.data.company_operation.province+' / '+res.data.company_operation.city+' / '+res.data.company_operation.county
        this.initValue = true
      }else{
        console.log(999);
         this.initValue = false
      }
      // if(res.data.status_vo.value == 'REVIEW'){
      //   this.disabledForm=false
      // }else{
      //   this.disabledForm=true
      // }
    },
    //寄送地址
    areaChange(value){
        console.log(value);
      if(value){
        console.log(value);
        let labelData=this.$refs['regLabel'].getCheckedNodes()[0].pathLabels
        console.log(this.defaultarea);
        this.defaultarea=labelData.join(' / ')
        this.postData.company_operation.region_info=value.join()
        this.postData.company_operation.province=labelData[0]
        this.postData.company_operation.city=labelData[1]
        this.postData.company_operation.county=labelData[2]
      }
    },
    //保存发票抬头信息
    async savePost(){
      this.$refs.postRef.validate((valid) => {
        if (valid) {
          const params=this.postData
          console.log(params);
          this.$http.companyApi.companyEditPost(params).then(res => {
            console.log(res);
            if(res.status === 200){
              this.$message.success("保存成功")
              this.$router.go(0)
            }
          })
        } else {
          this.$message.warning("请完整填写发票抬头信息")
        }
      }); 
    }
  },
}

</script>

<style scoped>
.cardHead{
  font-weight: 600;
  font-size: 16px;
  color: #181C27;
  padding: 16px 24px;
  border-bottom: 1px solid #EDEDED;
}
.invoceBox{padding: 24px 8.19% 24px 24px;}
.tip{
  font-size:12px;
  color: #F5222D;
  margin-bottom: 24px;
}
.invoiceBtn{
  text-align: right;
  margin-bottom: 16px;
}
.invoiceBtn .btns{
  width: 76px;
}
.margintop{
  margin-top: 72px;
}
</style>